<template>
  <el-dialog
    :title="!conventionShow ? '查看' : '预约'"
    :visible.sync="dialogFormVisible"
    width="700px"
    style="padding-top: 0"
    @close="close"
  >
    <!-- 查看模式 -->
    <el-form
      v-show="!conventionShow"
      ref="form"
      :model="form"
      label-width="100px"
      style="margin-bottom: 20px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机房名称">
            <el-input v-model="form.labName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机房容量">
            <el-input v-model="form.capacity" readonly />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="12">
          <el-form-item label="机房状态">
            <el-select v-model="form.status" disabled>
              <el-option label="空闲" :value="0" />
              <el-option label="占用" :value="1" />
            </el-select>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="机房位置">
            <el-input v-model="form.address" readonly />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机房用途">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              v-model="form.func"
              readonly
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机房描述">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              v-model="form.description"
              readonly
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" v-show="!conventionShow">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="conventionShow = true">预 约</el-button>
    </div>
    <!-- 预约模式 -->
    <el-form
      v-show="conventionShow"
      ref="subFormRef"
      :rules="subFormRules"
      :model="subForm"
      label-width="100px"
      style="margin-bottom: 20px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="选择日期" prop="appointDate">
            <el-date-picker
              v-model="subForm.appointDate"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择时间段" prop="appointTime">
            <el-select v-model="subForm.appointTime">
              <el-option label="上午" value="0" />
              <el-option label="下午" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="实验内容" prop="description">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              v-model="subForm.description"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-show="conventionShow">
      <el-button @click="conventionShow = false">返 回</el-button>
      <el-button type="primary" @click="convention">确 认</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { labDetails, appointment } from "@/api/studentUserAdmin/index";
export default {
  name: "TableEdit",
  data() {
    return {
      pickerOptions: {
        // 限制收货时间不让选择今天以前的
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
      },
      form: {
        labName: "", //机房名称
        func: "", //机房用途
        address: "", //位置
        capacity: "", //容量
        description: "", //描述
        status: "", //状态
      },

      dialogFormVisible: false, //弹窗开关
      conventionShow: false, //预约模式

      subForm: {
        appointDate: "", //预约日期
        appointTime: "", //0上午 1下午
        description: "", //预约描述
        labId: "", //机房ID
        user_id: "", //用户ID
      },
      subFormRules: {
        appointDate: [
          { required: true, message: "请选择预约日期", trigger: "change" },
        ],
        appointTime: [
          { required: true, message: "请选择时间段", trigger: "change" },
        ],
        description: [
          { required: true, message: "请输入实验内容", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 显示弹窗
    showEdit(row) {
      this.conventionShow = false;
      this.dialogFormVisible = true;
      this.subForm.labId = row.labId;
      this.subForm.user_id = this.$store.getters.userId;
      this.labDetails(row.labId);
    },
    close() {
      this.dialogFormVisible = false;
    },
    //查询详情
    labDetails(labId) {
      labDetails(labId).then((res) => {
        this.form = res.data;
      });
    },
    // 修改或添加
    convention() {
      this.$refs["subFormRef"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "请求中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          appointment(this.subForm)
            .then((res) => {
              loading.close();
              this.$message.success(res.msg);
              this.dialogFormVisible = false;
              this.$emit("getList");
            })
            .catch((err) => {
              loading.close();
              this.$message.error(res.msg);
            });
        }
      });
    },
  },
};
</script>
<style>
.el-dialog__body {
  padding-top: 10px !important;
}
</style>
<style lang="scss" scoped>
.title-box {
  display: block;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}
</style>
  